<template>
  <div class="HidePrimary" id="Primary">
    <div class="Hidefrist" id="DynamicCss">
      <div class="HiddenSome" id="HiddenSome">
        <Frist />
      </div>
      <!-- 缓冲区域 -->
      <div class="HideHidden" id="HideHidden">
        <div
          role="img"
          tabindex="-1"
          class="waitindicator"
          aria-label="loading"
        >
          <svg
            t="1666594238205"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1393"
            width="50"
            height="50"
          >
            <path
              d="M921.897577 650.649803c-57.757448 166.861332-216.07315 287.199071-402.326135 287.199071-234.904031 0-426.016697-191.109596-426.016697-426.019767 0-234.912218 191.112666-426.019767 426.016697-426.019767 95.207385 0 182.91803 31.775704 253.924223 84.754313l12.598946-17.816784c-74.577532-55.503105-166.619832-88.785116-266.522146-88.785116-246.950392 0-447.867354 200.912869-447.867354 447.867354 0 246.953462 200.916962 447.867354 447.867354 447.867354 198.481494 0 366.978069-129.890302 425.573605-309.045635L921.897577 650.650827z"
              p-id="1394"
              fill="#1296db"
            ></path>
          </svg>
        </div>
      </div>
      <button class="CloseWindow" @click="CloseWindow">
        <span class="Frist">
          <svg
            t="1664608715289"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4967"
            width="15"
            height="15"
          >
            <path
              d="M143.616 47.104l830.08 830.08c26.24 26.24 26.24 69.888 0 96.128-26.24 26.24-69.888 26.24-96.128 0L47.488 143.232c-17.536-26.24-17.536-69.888 0-96.128 26.24-26.24 69.888-26.24 96.128 0z m0 0"
              fill="#515151"
              p-id="4968"
            ></path>
            <path
              d="M982.528 143.232L152.32 973.312c-26.24 26.24-69.888 26.24-96.128 0-26.24-26.24-26.24-69.888 0-96.128L886.4 47.104c26.24-26.24 69.888-26.24 96.128 0 17.408 26.24 17.408 69.888 0 96.128z m0 0"
              fill="#515151"
              p-id="4969"
            ></path>
          </svg>
        </span>
      </button>
      <div class="Hiddenears" id="Hiddenears">
        <ContextThis/>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "Vuex";
import bus from "../../../../../bus/index";
import ContextThis from './ContextSecond/ContextTwo/ContextThis.vue';
import Frist from "./ContextSecond/Frist.vue";
export default {
  components: { Frist, ContextThis },
  data() {
    return {
      context: "",
      // 窗口
      scorllfrist: false,
      // 固定样式
      Cancelfrist: true,
      CloseAll: false,
      CloneSecond: "Second",
      ContextHiddenarea: [],
      ContextHiddenTown:[],
      allareaNew:'',
      HiddenIf:false,
      HiddenThis:true,
      totleSecondHigeht:''
    };
  },
  created() {
    const that = this;
    bus.$on("get-functionTwo", function (data, scorll) {
      var Primary = document.getElementById("Primary");
      var DyCss = document.getElementById("DynamicCss");
      if ((data = true)) {
        //  页面进行展示
        Primary.style.display = "block";
        window.addEventListener("scroll", this.MoveScorll);
      }
      //  动态添加样式
      if (scorll > 0) {
        DyCss.style.top = scorll + "px";
      } else {
        DyCss.style.top = 0 + "px";
      }
    });
    // 接收Contextone第一块区域传递进来的数据
    bus.$on('FristButton',function(data){
      that.ContextHiddenTown.splice(0,1,data)
      that.HiddenChange()
    })
    // 接收ContextScond传递进来的数据
    bus.$on('touchHidden',function (data) {
      if (data==true) {
        that.HiddenChange()
      }
    })
    // 接收ContextOne第三块区域传递进来的数据
    bus.$on("ThereButton", function (data) {
      that.ContextHiddenarea.splice(0,1,data);
      that.HiddenChange()
    });
        // 接收ContextOne的数据
   bus.$on('closeWindon',function(data){
      // 点击地区之后接收该地区
      that.allareaNew=data
      that.HiddenThis=true
      // 判断用户是否点击了地区
    })
    // 接收frist数据，是展示还是隐藏下拉框
    bus.$on('HiddenIf',function (data) {
      that.HiddenIf=data
    })
    bus.$on('FristHightChange',function (data) {
      that.totleSecondHigeht=data
      setTimeout(() => {
        that.addTotleHight()
      }, 100);
    })
    // 接收ShopContext的值
    bus.$on('PreserClose',function (data) {
      if (data==true) {
        that.CloseWindow()
      }
    })
  },
  computed: {
    ...mapState(["HideContext"]),
  },
  methods: {
    // 这个函数只执行了一次，需要执行多次才能实时监测数据的变化
    // 这个函数需要被外部执行
    UseHidethis() {
      // 获取dom
      var Primary = document.getElementById("Primary");
      // Primary.style.display = "none";
    },
    HiddenChange(){
      var HiddenSome = document.getElementById("HiddenSome");
      var HideHidden =document.getElementById('HideHidden')
      var Hiddenears =document.getElementById('Hiddenears')
      // HiddenSome.style.display='none'
      HideHidden.style.display='block'
      // Hiddenears.style.display='none'
      setTimeout(() => {
        HideHidden.style.display='none'
        // HiddenSome.style.display='block'
        // Hiddenears.style.display='block'
      }, 2000);  
    },
    HiddenStyle(){
     var HideHidden =document.getElementById('HideHidden')
     HideHidden.style.display='none'
    },
    // 使用点击关闭窗口事件,同时清空输入框里面的所有值
    CloseWindow() {
      this.UseHidethis();
      // 传递数据，使得ContextFrist再次启用滑轮监视器
      this.scorllfrist = true;
      bus.$emit("scorll", this.scorllfrist);
      // 传递给App
      bus.$emit("Cancel", this.Cancelfrist, this.CloneSecond);
       // 传值给ContextScoend
       bus.$emit('Fristarea', this.allareaNew)
    },
    MoveScorll() {
      // var scorllTop =document.body.scroll || document.documentElement.scroll
      var scorll = document.getElementById("DynamicCss");
      scorll.style.top = 0 + "px";
    },
    // 点击之后添加主页面的高度
    addTotleHight(){
      var DynamicCss =document.getElementById('DynamicCss')
    }
  },

  mounted() {
    this.UseHidethis();
    this.HiddenStyle();
  },
};
</script>

<style lang="less" scoped>
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}
.HidePrimary {
  z-index: 9999;
  width: 100%;
  // height: 900px;
  position: absolute;
  background-color: rgba(50, 50, 50, 0.88);
  // overflow: hidden;
  .Hidefrist {
    position: relative;
    width: 816px;
    // height: 814px;
    background-color: #ffffff;
    margin: 35px auto;
    border-radius: 20px;
    overflow: hidden;
    .HideHidden {
      top: 20px;
    width: 816px;
    height: 814px;
     background-color: #ffffff;
    margin: 35px auto;
    border-radius: 20px;
    overflow: hidden;
    position: absolute;
    z-index: 997;
      .waitindicator {
        position: absolute;
        top: 250px;
        left: 400px;
        display: inline-block;
        animation-name: rotation;
        -webkit-transform: rotate(360deg);

        animation: rotation 1s linear infinite;

        -moz-animation: rotation 1s linear infinite;

        -webkit-animation: rotation 1s linear infinite;

        -o-animation: rotation 1s linear infinite;
        border-radius: 50%;
        display: block;
        transform: rotate(360deg);
        transition: 20s;
      }
    }
    .CloseWindow {
      top: 20px;
      left: 20px;
      width: 44px;
      height: 44px;
      border: none;
      position: absolute;
      background-color: #ffffff;
      cursor: pointer;
      .Frist {
        display: block;
        height: 36px;
        width: 36px;
        background: #e8e8ed;
        border-radius: 50%;
        position: relative;
        .icon {
          top: 9px;
          left: 11px;
          position: absolute;
        }
      }
    }
    .ContxtMain {
      padding-top: 74px;
      padding-bottom: 50px;
      width: 816px;
      height: 966px;
      .Fristone {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>